<template>
  <div>
    <a-tree
      :tree-data="fieldList"
      :field-names="{ key: 'filterColumnName' }"
      :selected-keys="[]"
      @select="handleSelectField"
    />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    props: {
      fieldList: {
        type: Array,
        default: () => []
      }
    },
    emits: ['selectField'],
    setup(_props, { emit }) {
      // 点击字段后，抛出选中字段的事件
      function handleSelectField(_selectedKeys, event) {
        const [selectedNode] = event.selectedNodes
        emit('selectField', selectedNode)
      }

      return {
        handleSelectField
      }
    }
  })
</script>

<style lang="less" scoped>
  :deep(.@{ant-prefix}-tree-switcher) {
    // 当前的树选择只有一层，所以将展开按钮部分隐藏，以优化样式；如果树结构有了层级，需要将其去掉
    width: 0;
  }
</style>
